    class Page {
        constructor(cname, obj = {}) {
            this.box = document.querySelector('.' + cname)
                //自己创建一个大div用来分页
            this.container = document.createElement('div')
                //给大div设置样式
            this.setStyle(this.container, {
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center'
                })
                //自己创建的div放在准备好的大盒里
            this.box.appendChild(this.container)
                //传入的obj获取到作为对象属性
            this.obj = obj
                //给对象创建页码属性 - 放页码的 - 先设置空，后面计算好放
            this.pageList = ''
                //设置当前页默认为1
            this.currentPage = 1
                //将obj变成可选参数
                //有obj传进来就把值赋给default，有传参obj，就用default
                //设置默认的对象 
            this.default = {
                    showTextObj: {
                        first: '首页',
                        previous: '前一页',
                        list: '',
                        next: '后一页',
                        last: '末页'
                    },
                    pageData: {
                        total: 100,
                        pageSize: 10
                    }
                }
                //有obj传进来就把值赋给default，有传参obj，就用default
            this.deal()
                //总页码数 - 总条目数/每页显示条数
            this.allPage = this.default.pageData.total - this.default.pageData.pageSize
                //创建5个div - 放页码的 - 根据 default中的showTextPage创建
            this.createDiv()
                //创建5个页码  - 用 p 代表 - 放在5个div中
            this.createPage()
                //创建数字输入框和 go 按钮
            this.createIn()
                //点击事件
            this.click()
                //判断禁用
            this.disabled()

        }
        setStyle(ele, obj) {
            for (var attr in obj) {
                ele.style[attr] = obj[attr]
            }
        }
        createPage() {
            this.pageList.innerHTML = ''
                //根据总页数确定
                //总页数<=5  p就创建总页数个
            if (this.allPage <= 5) {
                this.createP(1, this.allPage)
            }
            //总页数>=5 
            else {
                //判断当前页是前两页
                if (this.currentPage <= 2) {
                    this.createP(1, 5)
                }
                //当前页最后两页
                else if (this.currentPage >= this.allPage - 1) {
                    //总页数的最后5个
                    this.createP(this.allPage - 4, this.allPage)
                }
                //当前页中间页
                else {
                    this.createP(this.currentPage - 2, this.currentPage + 2)
                }
            }
        }

        createP(start, end) {
            for (var i = start; i <= end; i++) {
                var p = document.createElement('p')
                p.innerHTML = i
                this.setStyle(p, {
                    width: '30px',
                    'line-height': '30px',
                    'text-align': 'center',
                    height: '30px',
                    border: '1px solid black',
                    margin: '5px',
                })
                this.pageList.appendChild(p)
                console.log(p);
                //设置当前页的样式
                if (this.currentPage === i) {
                    this.setStyle(p, {
                        backgroundColor: 'blue',
                        color: 'white'
                    })
                }
            }
        }
        createIn() {
            var input = this.container.createElement('input') in
                input.setAttribute('type', 'number')
            var go = this.container.createElement('button')
            go.innerHTML = 'GO'
            input.setStyle('input', {
                width: '50px',
                height: '30px',
                outline: 'none'
            })
            go.setStyle('go', {
                width: '50px',
                height: '30px'
            })
            this.container.appendChild(input)
            this.container.appendChild(go)
        }
        createDiv() {
            for (var attr in this.default.showTextObj) {
                var div = document.createElement('div')
                div.innerHTML = this.default.showTextObj[attr]
                div.className = attr
                this.container.appendChild(div)
                if (attr !== 'list') {
                    this.setStyle(div, {
                        'line-height': '30px',
                        'text-align': 'center',
                        width: '70px',
                        height: '30px',
                        margin: '5px',
                        border: '1px solid black',
                    })
                } else {
                    this.pageList = div
                    this.setStyle(div, {
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                    })
                }
            }
        }
        deal() {
            for (var attr in this.obj.showTextObj) {
                //替换
                this.default.showTextObj[attr] = this.obj.showTextObj[attr]
            }
            for (var attr in this.obj.pageData) {
                //替换
                this.default.pageData[attr] = this.obj.pageData[attr]
            }
        }
        disabled() {
            if (this.currentPage == 1) {
                this.container.children[0].setAttribute('disabled', true)
                this.container.children[1].setAttribute('disabled', true)
                    //设置禁用样式
                this.container.children[0].style.backgroundColor = '#ccc'
                this.container.children[1].style.backgroundColor = '#ccc'
            } else {
                this.container.children[0].removeAttribute('disabled')
                this.container.children[1].removeAttribute('disabled')

                this.container.children[0].style.backgroundColor = 'transparent';
                this.container.children[1].style.backgroundColor = 'transparent';
            }
            //如果当前页是总页数，下一页和末页禁用
            if (this.currentPage == this.allPage) {
                this.container.children[3].setAttribute('disabled', true)
                this.container.children[4].setAttribute('disabled', true)
                    //设置禁用样式
                this.container.children[3].style.backgroundColor = '#ccc'
                this.container.children[4].style.backgroundColor = '#ccc'
            } else {
                this.container.children[3].removeAttribute('disabled')
                this.container.children[4].removeAttribute('disabled')

                this.container.children[3].style.backgroundColor = 'transparent';
                this.container.children[4].style.backgroundColor = 'transparent';
            }
        }
        click() {
            this.container.onclick = () => {
                var e = window.event
                    //target代表所有子元素  -  兼容性写法
                var target = e.target || e.srcElement
                    //首页点击
                if (target.className == 'first' && target.getAttribute('disabled') !== true) {
                    this.currentPage = 1
                    this.createPage()
                    this.disabled()
                }
                //上一页点击
                else if (target.className == 'previous' && target.innerHTML !== this.currentPage) {
                    this.currentPage--
                        this.createPage()
                    this.disabled()
                }
                //下一页点击
                else if (target.className == 'next' && target.innerHTML !== this.currentPage) {
                    this.currentPage++
                        this.createPage()
                    this.disabled()
                }
                //末页点击
                else if (target.className == 'last' && target.getAttribute('disabled') !== true) {
                    this.currentPage = this.allPage
                    this.createPage()
                    this.disabled()
                }
                //页码点击
                else if (target.tagName == 'P' && target.innerHTML != this.currentPage) {
                    this.currentPage = +target.innerHTML
                    this.createPage()
                }
                //按钮点击，判断输入框的数字是不是当前页，是就不执行，不是执行
                else if (target.tagName == 'BUTTON' && target.previousElementSibling.value !== this.currentPage) {
                    //如果输入的值小于1，当前页就设置为1
                    if (target.previousElementSibling.value < 1) {
                        this.currentPage = 1
                    } else if (target.previousElementSibling.value > this.allPage) {
                        this.currentPage = this.allPage
                    }
                }
            }
        }
    }